<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
    <Card>
        <Card>
            <header>
                <span> 证件号码:</span>
                <Input v-model="paymentCondition.custIdNumber" style="width:200px" />

                <span style="width: 200px;margin-left: 20px;"> 姓名:</span>
                <Input v-model="paymentCondition.custName" style="width:200px" />

                <span style="width: 200px;margin-left: 20px;">贷款编号 :</span>
                <Input v-model="paymentCondition.loanId" style="width:200px" />
                <Button type="primary" @click="initData" style="margin-left: 20px;">提交</Button>

                <Button type="primary" @click="reset" style="margin-left: 20px;">重置</Button>
            </header>
        </Card>
        <Card>
            <Card style="height: 88px;">
                <div style="width:40%;float: left;margin-top: 8px;text-align: end;">
                    <a href="javacript:void(0);" @click="refuseList()">已拒绝{{statistics.auditRefuseTotal}}份</a>
                </div>
                <div style="width:40%;float: left;margin-top: 8px;text-align: center;">
                    <a href="javacript:void(0);" @click="adoptList()">已通过{{statistics.auditSuccessTotal}}份</a>
                </div>
                <!-- <div style="width:20%;float: left;margin-top: 8px;text-align: end;"><Button type="primary"  @click="back"  style="float: right">返回</Button></div> -->
            </Card>
            <Table border :columns="columns" :data="columnData" style="width: 100%;"></Table>
            <div class="apply-data-bottom-page-div">
                <Page :total="paymentCondition.total" :current="paymentCondition.pageNum" :page-size="paymentCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
        <Modal v-model="modal1" title="代还款申请" @on-ok="ok" @on-cancel="cancel">
            <Form ref="dataForm" :model="applyInfo" :rules="dataRules" :label-width="250">
                <FormItem label="应还金额：" prop="">
                    <Input v-model="applyInfo.paymentAmount" style="width:180px" :disabled="true" />
                </FormItem>
                <FormItem label="实还金额：" prop="paymentAmountAct">
                    <Input v-model="applyInfo.paymentAmountAct" style="width:180px" />
                </FormItem>
                <FormItem label="还款方式:" prop="paymentWay">
                    <Select v-model="applyInfo.paymentWay" class="v-select-wrapper" style="width:180px">
                        <Option v-for="item in paytmentWayList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                </FormItem>

                <FormItem label="交易流水号：" prop="tradeSerialNumber">
                    <Input v-model="applyInfo.tradeSerialNumber" style="width:180px" />
                </FormItem>
                <FormItem label="备注:" prop="remarks">
                    <Input v-model="applyInfo.remarks" style="width:180px" />
                </FormItem>
                <FormItem label="转账是否本人:" prop="isTransferPersonally">
                    <Select v-model="applyInfo.isTransferPersonally" class="v-select-wrapper" style="width:180px" @on-change="transferPersonallyChange" :label-in-value=true>
                        <Option v-for="item in transferPersonallyList" :value="item.value" :key="item.value">{{ item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="转账人姓名：" prop="transferUserName" v-if="applyInfo.isTransferPersonally=='0'">
                    <Input v-model="applyInfo.transferUserName" style="width:180px" />
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>

<script>
const validatePaymentAmountAct = (rule, value, callback) => {
  var myreg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
  if (!myreg.test(value)) {
    callback(new Error('请输入正确的实还金额'))
  } else {
    callback()
  }
}
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      paymentCondition: {
        custName: '',
        custIdNumber: '',
        loanId: '',
        repaymentBeginDate: '',
        repaymentEndDate: '',
        repaymentStatus: '',
        audistStatus: '',
        payType: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      transferUserNameTmp: '',
      transferPersonallyList: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      applyInfo: {
        paymentAmountAct: '', // 实还金额
        paymentWay: '', // 还款方式
        remarks: '', // 备注
        transferUserName: '', // 转账人姓名
        loanId: '', // 进件单号
        isTransferPersonally: '',
        tradeSerialNumber: '',
        paymentAmount: ''
      },
      statistics: {
        auditRefuseTotal: 0,
        auditSuccessTotal: 0
      },
      paytmentWayList: [
        {
          value: '1',
          label: '对公转账'
        },
        {
          value: '2',
          label: '支付宝转账'
        }
      ],
      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center'
        },
        {
          title: '身份证',
          key: 'custCardNo',
          align: 'center'
        },
        {
          title: '还款期数',
          key: 'currTenor',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'fundName',
          align: 'center'
        },
        {
          title: '总欠款金额',
          key: 'amount',
          align: 'center'
        },
        {
          title: '实还金额',
          key: 'amountAct',
          align: 'center'
        },
        {
          title: '还款方式',
          key: 'repaymentWays',
          align: 'center',
          render: (h, params) => {
            if (params.row.repaymentWays === '1') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
            if (params.row.repaymentWays === '2') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '对公转账')
            }
          }
        },
        {
          title: '状态',
          key: 'contractStatus',
          align: 'center',
          // 0正常 1逾期 2结清 3提前结清 10核销
          render: (h, params) => {
            if (params.row.contractStatus === '0') { // 对公转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '正常')
            }
            if (params.row.contractStatus === '1') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '逾期')
            }
            if (params.row.contractStatus === '3') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '提前结清')
            }
            if (params.row.contractStatus === '10') { // 支付宝转账
              return h('span', {
                props: {
                  type: 'text',
                  size: 'small'
                }
              }, '核销')
            }
          }

        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            if (params.row.auditStatus !== '0') {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.applyInfo.loanId = params.row.loanId
                    this.applyInfo.transferUserName = params.row.custName
                    this.transferUserNameTmp = params.row.custName
                    this.applyInfo.paymentAmount = params.row.amount
                  }
                }
              }, '代还款')
            }
          }
        }
      ],
      columnData: [],
      dataRules: {
        paymentAmountAct: [
          {
            validator: validatePaymentAmountAct,
            trigger: 'blur'
          }// 实还金额
        ],
        paymentWay: [
          {
            required: true, message: '还款方式不能为空', trigger: 'blur'
          }
        ],
        tradeSerialNumber: [
          {
            required: true, message: '交易流水号不能为空', trigger: 'blur'
          }
        ],
        remarks: [
          {
            required: true, message: '备注不能为空', trigger: 'blur'
          }
        ],
        isTransferPersonally: [
          {
            required: true, message: '转账是否本人不能为空', trigger: 'blur'
          }
        ],
        transferUserName: [
          {
            required: true, message: '转账是否本人不能为空', trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    // this.paymentCondition=this.$route.params.paymentCondition;
    this.initData()
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },
  methods: {
    transferPersonallyChange (value) {
      if (value.value === '0') {
        this.applyInfo.transferUserName = ''
      } else if (value.value === '1') {
        this.applyInfo.transferUserName = this.transferUserNameTmp
      }
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.paymentCondition.pageNum = pageNum
      vm.initData()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.paymentCondition.pageSize = pageLength
      vm.initData()
    },
    initData () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentApplyList', this.paymentCondition).then(re => {
        var data = re.data
        vm.columnData = data.data.list
        vm.paymentCondition.total = data.data.total
        vm.statistics = data.data.statistics
      }).catch(er => {

      })
    },
    ok () {
      var vm = this
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (parseFloat(this.applyInfo.paymentAmountAct) > parseFloat(this.applyInfo.paymentAmount)) {
            this.$Modal.confirm({

              content: '输入实还金额大于应还金额,确定继续?',

              okText: '确定',

              cancelText: '取消',
              onOk: () => {
                this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentApply', vm.applyInfo).then(re => {
                  var data = re.data
                  var message = data.message
                  this.$Message.warning(message)
                  vm.initData()
                }).catch(er => {

                })
              }
            })
          } else {
            this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/replacePayment/service/paymentApply', vm.applyInfo).then(re => {
              var data = re.data
              var message = data.message
              this.$Message.warning(message)
              vm.initData()
            }).catch(er => {

            })
          }
        } else {
          this.clearDataStyle()
        }
      })
    },
    clearDataStyle () {
      this.$refs.dataForm.resetFields()// 清掉验证样式
      this.applyInfo.paymentAmountAct = ''
      this.applyInfo.paymentWay = ''
      this.applyInfo.tradeSerialNumber = ''
      this.applyInfo.remarks = ''
      this.applyInfo.isTransferPersonally = ''
      this.applyInfo.transferUserName = ''
    },
    cancel () {
      this.clearDataStyle()
    },
    adoptList () { // 通过
      var vm = this
      vm.paymentCondition.audistStatus = '1'
      vm.paymentCondition.payType = '1'
      var paymentCondition = vm.paymentCondition
      this.$router.push({ name: 'payment-audit-result', params: { paymentCondition } })// 类似post传参
    },
    refuseList () {
      var vm = this
      vm.paymentCondition.audistStatus = '2'
      vm.paymentCondition.payType = '1'
      var paymentCondition = vm.paymentCondition
      this.$router.push({ name: 'payment-audit-result', params: { paymentCondition } })// 类似post传参
    },
    back () {
      this.$router.push({ name: 'replace-payment-apply', params: {} })// 类似post传参
    },
    reset () {
      var vm = this
      vm.paymentCondition.custName = ''
      vm.paymentCondition.custIdNumber = ''
      vm.paymentCondition.loanId = ''
    }
  }
}
</script>
<style>
.apply-data-font-style {
  float: left;
  margin-left: -88px;
  text-align: center;
  width: 175px;
}
.apply-data-popup-style {
  margin: 18px;
  width: 300px;
  margin-left: 27%;
  margin-top: 31px;
}
.apply-data-bottom-page-div {
  margin-top: 120px;
  text-align: center;
}
</style>
